<template>
  <div class="person-detail">
    <div class="content-wrapper">
      <div class="info-setting">
        <h3 class="section-title">基本信息</h3>
        <el-form label-position="top" class="info-form">
          <el-form-item label="用户名">
            <el-input v-model="form.username" placeholder="网上/刷场签禁用" />
            <div class="input-hint">7/20</div>
          </el-form-item>

          <el-form-item label="开始工作">
            <el-date-picker
              v-model="form.workDate"
              type="date"
              placeholder="请选择日期"
              class="full-width"
            />
          </el-form-item>

          <el-form-item label="职业方向">
            <el-select
              v-model="form.careerDirection"
              placeholder="全栈开发"
              class="full-width"
            >
              <el-option label="前端开发" value="frontend" />
              <el-option label="后端开发" value="backend" />
              <el-option label="全栈开发" value="fullstack" />
              <el-option label="UI设计" value="design" />
            </el-select>
          </el-form-item>

          <el-form-item label="职位">
            <el-input v-model="form.position" placeholder="请输入你的职位" />
            <div class="input-hint">0/50</div>
          </el-form-item>

          <el-form-item label="公司">
            <el-input v-model="form.company" placeholder="请输入你的公司" />
            <div class="input-hint">0/50</div>
          </el-form-item>

          <el-form-item label="个人主页">
            <el-input v-model="form.homepage" placeholder="请输入你的个人主页" />
            <div class="input-hint">0/100</div>
          </el-form-item>

          <el-form-item label="个人介绍">
            <el-input
              v-model="form.introduction"
              type="textarea"
              :rows="4"
              placeholder="请填写职业技能、擅长的事情、兴趣爱好等"
              class="full-width"
            />
          </el-form-item>
        </el-form>
      </div>

    <div class="avatar-setting">
        <div class="avatar-card">
          <h3 class="section-title">头像设置</h3>
          <div class="avatar-preview">
            <img
              v-if="avatarUrl"
              :src="avatarUrl"
              alt="用户头像"
              class="avatar-image"
            >
            <el-icon v-else :size="80" color="#c0c4cc"><User /></el-icon>
          </div>

          <el-upload
            action="#"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
            :http-request="handleAvatarUpload"
            accept="image/*"
            class="upload-wrapper"
          >
            <el-button type="primary" size="small" class="upload-btn">
              上传头像
            </el-button>
          </el-upload>

          <div class="avatar-hint">支持 JPG/PNG 格式，大小不超过 2MB</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { User } from '@element-plus/icons-vue';

const form = ref({
  username: '小明',
  workDate: '',
  careerDirection: 'fullstack',
  position: '',
  company: '',
  homepage: '',
  introduction: ''
});
const beforeAvatarUpload = (file) => {
  const isImage = file.type.startsWith('image/');
  const isLt2MB = file.size / 1024 / 1024 < 2;

  if (!isImage) {
    ElMessage.error('只能上传图片文件!');
    return false;
  }
  if (!isLt2MB) {
    ElMessage.error('图片大小不能超过 2MB!');
    return false;
  }
  return true;
};





</script>

<style scoped>
.person-detail {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.page-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 30px;
  color: #303133;
}

.content-wrapper {
  display: flex;
  gap: 30px;
}

.info-setting {
  flex: 7;
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.avatar-setting {
  flex: 3;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #303133;
}

.info-form {
  padding: 0 10px;
}

.el-form-item {
  margin-bottom: 22px;
}

.el-form-item:last-child {
  margin-bottom: 0;
}

.input-hint {
  font-size: 12px;
  color: #909399;
  text-align: right;
  margin-top: 6px;
}

.full-width {
  width: 100%;
}

.avatar-card {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  text-align: center;
}

.avatar-preview {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
  border: 1px dashed #dcdfe6;
}

.upload-btn {
  margin-bottom: 10px;
}

.avatar-hint {
  font-size: 12px;
  color: #909399;
}
</style>
